<template>
  <div class="about-view">


    <!-- 公司介绍 -->
    <section class="intro-section">
      <div class="container">
        <div class="section-header">
          <h2>我们的故事</h2>
          <p>美食网成立于2023年，致力于为用户提供最优质的美食发现和分享平台</p>
        </div>
        <div class="intro-content">
          <div class="intro-text">
            <div class="intro-item">
              <div class="intro-icon">🎯</div>
              <div class="intro-details">
                <h3>我们的使命</h3>
                <p>连接美食爱好者与优质商家，打造最具影响力的美食生态平台，让每个人都能轻松发现身边的美味。</p>
              </div>
            </div>
            <div class="intro-item">
              <div class="intro-icon">👁️</div>
              <div class="intro-details">
                <h3>我们的愿景</h3>
                <p>成为全国领先的美食发现平台，通过技术创新和优质服务，为用户创造更美好的用餐体验。</p>
              </div>
            </div>
            <div class="intro-item">
              <div class="intro-icon">💎</div>
              <div class="intro-details">
                <h3>我们的价值观</h3>
                <p>诚信、创新、用户至上、品质第一。我们相信美食不仅是味觉的享受，更是生活的艺术。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>










  </div>
</template>

<script>
export default {
  name: 'AboutView',
  mounted() {
    // 页面加载时滚动到顶部
    window.scrollTo(0, 0)
  }
}
</script>

<style scoped>
.about-view {
  min-height: 100vh;
  background: var(--background-secondary);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}



/* 通用样式 */
section {
  padding: 80px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  position: relative;
}

.section-header h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: var(--radius-xl);
}

.section-header p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* 公司介绍 */
.intro-section {
  background: var(--background-primary);
}

.intro-content {
  max-width: 800px;
  margin: 0 auto;
}

.intro-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--background-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.intro-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.intro-icon {
  font-size: 3rem;
  margin-right: var(--spacing-lg);
  flex-shrink: 0;
}

.intro-details h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.intro-details p {
  color: var(--text-secondary);
  line-height: 1.6;
}











/* 响应式设计 */
@media (max-width: 768px) {
  .section-header h2 {
    font-size: 2rem;
  }
  
  .intro-item {
    flex-direction: column;
    text-align: center;
  }
  
  .intro-icon {
    margin-right: 0;
    margin-bottom: var(--spacing-md);
  }
}

@media (max-width: 480px) {
  section {
    padding: 60px 0;
  }
  
  .container {
    padding: 0 var(--spacing-md);
  }
}
</style>
